<template>
	<view class="content">
		<view class="header clear-both fs22 colorf font-weight">
			<view :class="['headers header1 float-l',{'act':!isPhonelogin}]" @tap="switchQuick">密码登录</view>
			<view class="line"></view>
			<view :class="['headers header2 float-r',{'act':isPhonelogin}]" @tap="switchQuick">快速登录</view>
		</view>
		<!--密码登录-->
		<view class="comm" v-show="!isPhonelogin">
			<view class="title fs18 colorf font-weight">手机号</view>
			<view class="edit clear-both">
				<view class="fs16 colorFF6 editag float-l font-weight">+86</view>
				<input type="number" class="input float-r colorf fs20" placeholder="请输入11位手机号" maxlength="11" placeholder-class="color80A"
				 v-model="phoneNo"/>
			</view>
			<view class="title fs18 colorf font-weight">密码</view>
			<view class="edit clear-both">
				<input type="text" class="input float-l colorf fs20" placeholder="请输入密码" placeholder-class="color80A" password="true"
				 maxlength="25" v-model="password"/>
				<!-- <view class="colorf float-r font-weight fs14 wjmm"><navigator url="./forget/forget">忘记密码</navigator></view> -->
			</view>
		</view>

		<!--快速登录-->
		<view class="comm" v-show="isPhonelogin">
			<view class="title fs18 colorf font-weight">手机号</view>
			<view class="edit clear-both">
				<view class="fs16 colorFF6 editag float-l font-weight">+86</view>
				<input type="number" class="input float-r colorf fs20" placeholder="请输入11位手机号" maxlength="11" placeholder-class="color80A"
				 v-model="phoneNo"/>
			</view>
			<view class="title fs18 colorf font-weight">验证码</view>
			<view class="edit clear-both">
				<input type="number" class="input float-l colorf fs20 inputyzm" placeholder="请输入验证码" placeholder-class="color80A"
				 maxlength="4" v-model="code"/>
				<view :class="['fsyzm float-r colorf fs14 text-center',{'act':!codeAgainGet}]" @tap="verCode()">{{codetext}}</view>
			</view>
		</view>

		<!--登录按钮-->
		<!--手机号 验证码 都正确 加btnact类-->
		<view class="loginbtn colorFF6 font-weight fs18 text-center" :class="{'btnact':(btnstate1&&btnstate2)||(btnstate1&&btnstate3)}" @tap="loginNow">登录</view>

		<!--微信快速登录-->
		<view class="wxlogin" v-show="ismp" @tap="mpAuthorizeLogin">
			<view>
				<view class="line vertical"></view>
				<view class="vertical fs14 colorf wxks">微信快速登录</view>
				<view class="line vertical"></view>
			</view>
			<view class="wxiocn">
				<image src="../../static/tabbar/index/wechat.png" mode="aspectFill" class="iocn middle"></image>
			</view>
		</view>

		<vercode ref="vercode" :contentHeight="480" v-on:changeCodetxt="changeCodetxt"></vercode>
		<!--弹窗-->
		<!--手机号已注册-->
		<!-- <image src="../../../static/tabbar/index/phone_yzc.png" mode="aspectFill" class="tkimg middle"></image> -->
		<!--手机号码无效-->
		<!-- <image src="../../../static/tabbar/index/phone_wx.png" mode="aspectFill" class="tkimg middle"></image> -->
		<!--验证码不正确-->
		<!-- <image src="../../../static/tabbar/index/yzm_err.png" mode="aspectFill" class="tkimg middle"></image> -->
		<!--密码错误-->
		<!-- <image src="../../../static/tabbar/index/psword_err.png" mode="aspectFill" class="tkimg middle"></image> -->
	</view>
</template>

<script>
	import local_userinfo from '@/util/user/local-userinfo.js'
	import vercode from '@/components/vercode/index.vue'
	export default {
		components: {
			vercode
		},
		data() {
			return {
				phoneNo: '',
				password: '',
				code: '',
				codestatus: false,
				codetext: '获取短信码',
				tickcount: 0,
				codeAgainGet: true,
				isPhonelogin: false,
				wantJumpurl: '',
				imgInfo: {
					head: '/static/login/head.png',
					icon_del: '/static/login/icon_del.png',
					icon_pwd_switch: '/static/login/icon_pwd_switch.png'
				},
				transteText: '切换至普通登录',

				ismp: false,
				btnstate:false,
				btnstate1:false,
				btnstate2:false,
				btnstate3:false,
			}
		},
		onShow() {
			this.$setTitle("嗨贝鲜生·登录")
			// #ifdef MP-WEIXIN
			this.ismp = true
			// #endif
		},
		onLoad(options) {
			this.wantJumpurl = decodeURIComponent(options.redirect || '/pages/tabBar/user');
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
		},
		methods: {
			switchQuick() {
				this.isPhonelogin = !this.isPhonelogin;
				this.password='';
				this.code='';
			},
			mpAuthorizeLogin() {
				if (this.ismp) {
					let wantJumpurl = encodeURIComponent(this.wantJumpurl);
					uni.navigateTo({
						url: '../../pages/login/quick?redirect=' + wantJumpurl
					})
				}
			},
			transteOtherLogin() {
				this.isPhonelogin = !this.isPhonelogin;
				if (!this.isPhonelogin) {
					this.transteText = '切换至手机号登录'

				} else {
					this.transteText = '切换至普通登录'
				}
			},
			verCode() {
				if (this.codeAgainGet) {
					let phone = this.phoneNo
					if (!/^1[3456789]\d{9}$/.test(phone)) {
						return uni.showToast({
							title: '请输入手机号',
							mask: true,
							duration: 1500,
							icon: 'none'
						});
					}
					this.$refs.vercode.toggleMask(phone);
				}
			},
			changeCodetxt(tickcount) {
				var _this = this
				var dg = null
				_this.codestatus = true
				_this.codeAgainGet = false
				if (!_this.codeAgainGet) {
					var i = tickcount; //服务器传的时间   
					_this.tickcount = tickcount;
					dg = function() {
						if (i >= 0) {
							_this.codetext = i + "s后重新获取";
							_this.tickcount = i;
							i--;
							setTimeout(function() {
								dg();
							}, 1000);
						} else {
							_this.codeAgainGet = true;
							_this.codetext = "重新获取";
						}
					}
					dg();
				}
			},
			loginNow() {
				let phone = this.phoneNo,
					code = this.code,
					pwd = this.password,
					codelogin = false,
					_this = this;
				if (!/^1[3456789]\d{9}$/.test(phone)) {
					return uni.showToast({
						title: '手机号格式错误',
						mask: true,
						duration: 1500,
						icon: 'none'
					});
				}
				if (this.isPhonelogin) {
					codelogin = true;
					if (code.length != 4) {
						return uni.showToast({
							title: '请输入手机验证码',
							mask: true,
							duration: 1500,
							icon: 'none'
						});
					}
				} else if (pwd.length == 0 || pwd.length > 20) {
					return uni.showToast({
						title: '密码错误',
						mask: true,
						duration: 1500,
						icon: 'none'
					});
				}
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})

				let params = {};
				let channel_from;
				// #ifdef H5
				channel_from = "H5"
				// #endif
				// #ifdef MP-WEIXIN
				channel_from = "MP"
				// #endif
				if (codelogin) params = {
					c: 'LoginController',
					m: 'login_Phone',
					phone: phone,
					code: code,
					channel_from: channel_from
				};
				else params = {
					c: 'LoginController',
					m: 'login_Pwd',
					phone: phone,
					pwd: pwd,
					channel_from: channel_from
				};

				this.$request.post({
					data: params,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					let dt = res;
					if (dt.Status == "ok") {
						let user = {};
						user.userid = dt.Tag.Id;
						user.sessionid = dt.Tag.rediskey;
						user.jzb = dt.Tag.Money;
						user.phone = dt.Tag.Mobile;
						user.vip = dt.Tag.Vip;
						user.vipexpiretime = dt.Tag.VipExpireTime;
						user.headimg = dt.Tag.HeadImage;
						user.loginname = dt.Tag.LoginName;
						user.realname = dt.Tag.RealName;

						local_userinfo.setUserinfo(user)

						let wantJumpurl = _this.wantJumpurl || '../../pages/cart/cart';
						if (_this.wantJumpurl.indexOf('/pages/tabBar/') > -1) {
							uni.switchTab({
								url: wantJumpurl
							})
						} else {
							uni.redirectTo({
								url: wantJumpurl
							});
						}
					} else {
						return uni.showToast({
							title: dt.Msg || '登录失败，请稍候重试',
							mask: true,
							duration: 1500,
							icon: 'none'
						})
					}

				}).catch(error => {
					console.log(error)
				})
			}
		},
		directives: {
			focus: {
				inserted: function(el, {
					value
				}) {
					if (value) {
						el.focus();
					}
				}
			}
		},
		watch:{
			phoneNo:function(val){
				this.btnstate1=val && val.length>10
			},
			password:function(val){
				this.btnstate2=val && val.length>5
			},
			code:function(val){
				this.btnstate3=val && val.length>3
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		width: 100%;
		background-color: #00449F;
	}
</style>
<style lang="scss" scoped="scoped">
	.content {
		height: 100%;
		width: 100%;
		position: relative;

		.tkimg {
			width: 37.334vw;
			height: 10.667vw;
			z-index: 999;
			display: block;
		}

		.header {
			padding: 12vw 0 12.8vw 0;
			position: relative;

			.line {
				width: 2upx;
				height: 5.334vw;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 12vw;
				background: #fff;
				opacity: 0.5;
			}

			.headers {
				height: 5.334vw;
				line-height: 5.334vw;
				opacity: .5;
			}

			.header1 {
				margin-left: 16vw;
			}

			.header2 {
				margin-right: 16vw;
			}

			.act {
				opacity: 1;
			}
		}

		.comm {
			margin: 0 8vw;

			.edit {
				height: 11.7334vw;
				border-bottom: 2upx solid #80A1CF;
				margin-bottom: 4vw;

				.editag {
					width: 12.8vw;
					height: 6.667vw;
					line-height: 6.667vw;
					background: #fff;
					border-radius: 1vw;
					text-align: center;
					margin-top: 2.5332vw;
				}

				.input {
					width: 68.2vw;
					height: 11.2vw;
					line-height: 11.2vw;
				}

				.wjmm {
					margin-top: 2.5332vw;
					height: 6.667vw;
					line-height: 6.667vw;
				}

				.inputyzm {
					width: 52.667vw;
				}

				.fsyzm {
					width: 29.334vw;
					height: 7.4667vw;
					line-height: 7.4667vw;
					border: 2upx solid #fff;
					border-radius: 3.73335vw;
					margin-top: 2.13335vw;
				}

				.act {
					color: #80A1CF;
					border: 2upx solid #80A1CF;
				}
			}
		}

		.tishi {
			margin-top: 2.4vw;
		}

		.loginbtn {
			width: 84vw;
			margin: 0 auto;
			background: #80A1CF;
			height: 13.334vw;
			line-height: 13.334vw;
			border-radius: 6.667vw;
			margin-top: 8vw;
		}

		.btnact {
			background: #fff;
		}

		.wxlogin {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 11.7334vw;

			.line {
				width: 5vw;
				height: 2rpx;
				background: #fff;
			}

			.wxks {
				margin: 0 2vw;
			}

			.wxiocn {
				width: 13.334vw;
				height: 13.334vw;
				border-radius: 50%;
				background: #fff;
				margin: 0 auto;
				margin-top: 4.8vw;
				position: relative;

				.iocn {
					width: 9.0667vw;
					height: 7.4667vw;
					display: block;
				}
			}
		}
	}

	.color80A {
		color: #80A1CF;
		font-size: 4.2667vw;
	}
</style>
